先從變數開始談起
JS 共有七種資料型態，可以七種型態可以分成兩類，primitive type 和 object。
七種資料型態
primitive type
1. null
2. undefined
3. string
4. number
5. boolean
6. symbol (ES6)
其他都是 object
7. object(array, function, date ...)
一、檢視資料型態
方法一、typeof (用 typeof 並不能保證結果為這七種型態)，會傳回一個字串值。
console.log(typeof function() {}) // function
console.log(typeof null) // object 廣為人知的 js bug
- 說明：JavaScript 的值就總以型別標簽跟著一個值的方式表示。物件的型別標簽是 0. 而 null 這個值是使用 NULL 指標 (在大部份平台上是 0x00) 來表示. 因此, null 看起來像是一個以 0 為型別標簽的值, 並使得 typeof 傳回不甚正確的結果
// 宣告變數但甚麼都沒給他
var a
console.log(typeof a) // undefined
// 沒有宣告變數
console.log(typeof b) // undefined
console.log(b) // ReferenceError: b is not defined
// 檢測變數是否有用
var c = 100
if (typeof c !== 'undefined') {
console.log(c)
}
- 用途：檢測變數是否有用、檢測 function
方法二、Array.isArray (回傳 true/false 告訴你是否為 array)
console.log(typeof []) // object
console.log(Array.isArray([])) // true
方法三、Object.prototype.toString.call() 會將型態判斷更細
console.log(Object.prototype.toString.call('1')) // [object String]
console.log(Object.prototype.toString.call([1, 2, 3])) // [object Array]
console.log(Object.prototype.toString.call(new Date())) // [object Date]
console.log(Object.prototype.toString.call(null)) // [object Null]
- 說明：有些 library 會用這個檢視型態，對於較舊的瀏覽器並沒有 Array.isArray，所以會利用 Object.prototype.toString.call() 去檢視結果是否同 [object Array]
二、primitive type VS object type
primitive types 是存值，object types 是存記憶體位置，再依據記憶體位置衍伸去改值。
差別一、immutable or not
primitive type is immutable(不能改變)。primitive types 會回傳一個新的值而非直接改變變數，object type 可以改變於原本的值。
因此，對 object type 做操作時，很多都會改變原本的值，要看文件知道這個 method 做了甚麼事情。
var a = 1
a = 2 // 重新賦值
console.log(a) // 2
var str = 'aaaaa'
str.toUpperCase() // 回傳一個新的字串，而非改變自己
console.log(str) // aaaaa
let newStr = str.toUpperCase() // primitive type 會回傳一個新的值
console.log(newStr) // AAAAA
var arr = [1]
arr.push(2) // 真的改變 arr 從 [1] => [1, 2]
console.log(arr) // [ 1, 2 ]
差別二、賦值 (=)
var a = 10
var b = a
console.log(a, b) // 10 10
b = 20
console.log(a, b) // 10 20
======
var obj = {
number : 10
}
var obj2 = obj
console.log(obj, obj2) // { number: 10 } { number: 10 }
obj2.number = 20
console.log(obj, obj2) // { number: 20 } { number: 20 }
因為底層的運作，導致兩類在賦值上有截然不同的反應。對 primitive types 他是直接存值在記憶體。objective types 存的值是記憶體位置，當我對 object types 用 = 賦值，他會先給一塊記憶體，將記憶體位置的值放進來。用點的話，表示我要存取他指到記憶體底下的某個屬性，
var a = 10
// 記憶體 a : 10
var b = a
// 將 a 的值 copy 過去給 b，所以 b: 10
b = 20
// b : 20
var obj = {
number : 10
}
/*
obj : 0x01
0x01: {
number: 10
}
*/
var obj2 = obj
// obj2: 0x01
obj2.number = 20
/*
obj : 0x01
obj2 : 0x01
0x01: {
number: 20
}
*/
因為 array 也是 object type，所以
var arr = []
var arr2 = arr
console.log(arr, arr2) // [] []
arr2.push(123)
console.log(arr, arr2) // [ 123 ] [ 123 ]
- 當我宣告 arr = [ ]，底層 arr 存放的是記憶體位置 arr:0x01，其中 0x01 這個位置放的是 [ ]
- 宣告 arr2 = arr，將 arr 的記憶體位置複製過來
- arr2.push(123) 是對 0x01 這個記憶體位置 push，現在 0x01 這個記憶體位置放的是 [123]
- 因為 arr, arr2 指向相同的記憶體位置，所以 log 出來的值相同。
var arr = []
var arr2 = arr
console.log(arr, arr2) // [] []
arr2 = [123]
console.log(arr, arr2) // [] [ 123 ]
- arr = [ ] => arr:0x01， 其中 0x01:[ ]
- arr2 = arr => arr2: 0x01，其中 0x01:[ ]
- arr2 = [123] => arr2: 0x02，其中 0x02:[123]，也就是他賦值是指向一塊新的記憶體
- 因為 arr, arr2 指向不同記憶體位置，所以兩個 log 出的值會不同
使用等號常見疏漏
- var a = 10
- 執行到第三行，將 a 賦值為 20，看 if 條件然後 log 出 hi
var a = 10
if (a = 20) {
console.log('hi')
}
// 結果會是 hi，等同下方代碼
a = 20
if (a) {
console.log('hi')
}
三、== 與 === 的差別
兩個等號會轉換型態，因為三個等號不會轉換型態，所以型態不同答案就是 false。
推薦：每次都用 ===
console.log(2 === '2') // false
console.log(2 == '2') // true
差別三、===
對 object types 而言， === 成立只有在比較的變數都指向相同記憶體位置才成立。
var obj = {
number: 1
}
var obj2 = obj
obj2.number = 2
console.log(obj === obj2) // true
- obj:0x01 其中 0x01: {number:1}
- obj2 = obj 所以 obj2:0x01 其中 0x01: {number:1}
- obj2.number = 2 所以指到的記憶體位置 0x01: {number:2}
- object types 做 === 比較的會是記憶體位置，而非實際的值
- 記憶體位置都是 0x01 所以是 true
同理，array is also object types.
var arr = [1]
var arr2 = [1]
console.log(arr === arr2) // false
var arr3 = []
var arr4 = []
console.log(arr3 === arr4) //false
- var arr = [1]，arr:0x01 其中 0x01: [1] (將記憶體位置給 arr 讓他可以指到陣列去)
- var arr2 = [1]，arr:0x02 其中 0x02: [1]
- 因為 === 比較的是記憶體位置，所以儘管記憶體位置裡的值相同，但仍印出 false
arr = [1]
arr2 = [1]
arr2 = arr
console.log(arr === arr2) // true
object types 做等號比較就是看他有沒有指向同樣地記憶體位置
console.log([] === []) // false
console.log({} === {}) // false
例外：NAN
NAN (not a number 其實還是一個 number)，NAN 不等於任何東西，even 他自身
console.log(typeof NAN) // number
var a = Number('xxx')
console.log(a) // NAN
console.log( a === a) // false
可以透過 isNAN() 去知道他是不是 NAN，但這個函式在舊的瀏覽器並不支援。
參考資料：
js eqiality table
初次見面：let 與 const
一旦以 const 進行宣告，他的值就不能改變。以 const 宣告時就要一併給他初始值，不能之後再賦值。let、var 沒有上述雜七雜八的限制。
對 object types 而言，const 是鎖定記憶體位置，並不是鎖定記憶體位置裡的東西。
const b = {
number : 1
}
b.number = 100 // 沒有錯誤提示
b = {number : 3} // TypeError: Assignment to constant variable.
- b:0x01 其中 0x01 : {number : 1}
- b.number = 100 是去記憶體位置 0x01 將 number 改成 100。也就是 b: 0x01 其中 0x01: {number: 100}
- b = {number : 3}，重給一塊記憶體位置並在裡面放。也就是 b:0x02 其中 0x02: {number : 3}
const arr = [1, 2, 54]
arr.push('1')
arr[0] = 3 // 沒有改變 arr 記憶體位置，而是改變他指的那個記憶體位置的那個值
arr = [3] // TypeError: Assignment to constant variable
- const arr = [1, 2, 54] 也就是 arr: 0x01 其中 0x01: [1, 2, 54]
- arr[0] = 3 也就是 arr: 0x01 其中 0x01: [3, 2, 54]
- arr = [3] 也就是 arr: 0x02 其中 0x02: [3] 因為 const 的規則不允許，所以會出現 TypeError: Assignment to constant variable
三、變數的生存範圍：Scope
作用域也就是變數的生存範圍，一出這個範圍就無法存取到這個變數。scope chain 會依照程式碼的放置的位置而定，跟我在哪裡呼叫 function 無關。
我們會先聚焦在 ES6 以前的作用域。
ES6 以前變數的作用域基本單位是 function，只有 function 可以產生新的作用域。
a 宣告在 test scope 裡面，一旦出了 function，就不能被其他人看到，所以對於外面來說因為找不到 a，a 是 undefined
function test() {
var a = 10 // a 宣告在 test scope 裡面
console.log(a)
}
test()
console.log(a) // ReferenceError: a is not defined
全域變數可以想成是以檔案為單位，因為作用域是往上找，當 test 引擎在 test scope 裡面找不到 a，他就往上找。
var a = 20 // global variable
function test() {
console.log(a) // 20
}
test()
console.log(a) // 20
因為會在 function 的作用域先找，所以 test 裡面的 a 是 10
var a = 20 // global variable
function test() {
var a = 10
console.log(a) // 10
}
test()
console.log(a) // 20
test 裡面的 a = 10，但沒有變數宣告，也就是沒有在 test scope 新增一個變數。往上層找，發現 global 有宣告 a，就將 global a 的值改成 10
var a = 20 // global variable
function test() {
a = 10
console.log(a) // 10
}
test()
console.log(a) // 10
同樣在 test() 裡面 a = 10，往上層找也找不到值，就自動幫我在 global 宣告變數。所以這時 a 被宣告成 global variable。
在 function 內使用變數一定要宣告，不然會變成 global variable。
function test() {
a = 10 // global variable
console.log(a) // 10
}
test()
console.log(a) // 10
往上找的過程構成了 scope chain。
inner scope => test scope => global scope
var a = 'global' // global scope
function test() { // scope
var a = 'test scope a'
var b = 'test scope b'
console.log(a, b) // 'test scope a' 'test scope b'
function inner() { // scope
var b = 'inner scope b'
console.log(a, b) // 'test scope a' 'inner scope b'
}
inner()
}
test()
console.log(a) // 'global'
作用域的判斷和在哪邊宣告有關係，和在哪邊呼叫 function 沒有關係。這個 test 和 change 是兩個平行的地方。
test scope -> global scope
var a = 'global' // global scope
function change() { // change scope : a
var a = 10
test()
}
function test() { // test scope
console.log(a)
}
change() // 'global'
同理，test scope -> global scope
var a = 'global' // global scope
function change() { // change scope
var a = 10
function inner() { // inner scope
var a = 'inner'
test()
}
inner()
}
function test() { // test scope
console.log(a)
}
change() // 'global'
四、let 與 const 的生存範圍
ES6 引進 let, const。因此 ES6 以前的作用域跟 ES6 以後略有不同。
- ES6 前 : 作用域以 function 為基礎
- ES6 以後 : let, const 宣告的變數，只要有 block { } 就會產生作用域
用 var 宣告，他的 scope 就是 test 這個 function。所以在 test 裡都可以用到 b 這個變數。
function test() {
var a = 60
if (a === 60) {
var b = 10
}
console.log(b)
}
test() // 10
let 或 const 宣告變數，scope 會存在於 block 內。以這個例子 b 只有在 if 裡面才活著，出了 if 就存取不到。
function test() {
var a = 60
if (a === 60) {
let b = 10
}
console.log(b)
}
test() // ReferenceError: b is not defined
因為 i 是用 var 宣告，所以在 test 裡面都有作用
i = 9 進入下一圈迴圈 i++ => i = 10，判斷條件 10 < 10 false，
function test() {
for(var i=0; i<10; i++) {
console.log('i', i)
}
console.log('final value', i) // 10
}
test()
i 用 let 宣告，所以 i 只存在 for loop 的 block 中。一脫離就存取不到這個 i。
function test() {
for(let i=0; i<10; i++) {
console.log('i', i)
}
console.log('final value', i) // ReferenceError: i is not defined
}
test()
重點整理
- var : function scope
- let/const : block scope
